import React, { useEffect } from 'react'

import Menu from "./Menu"

import "./App.css"
import {permits} from "./data"

export default function App() {
  const list = JSON.parse(JSON.stringify(permits))
  let top, uls, as

  useEffect(()=>{
    const nav = document.querySelector("nav")
    top = nav.childNodes[0]
    uls = traverseChildren(top, "UL")
    as = traverseChildren(top, "A")
    as.forEach(child=>child.onclick=expand(child))
  }, [])

  const expand = (element)=>{
    return ()=>{
      // 当前被点击节点的父节点
      const currentLi = retrieveParent(element, "LI")
      // 当前被点击节点旁边的兄弟节点,可能是菜单子节点(ul),也可能只是叶节点(li)
      let currentMenu = retrieveChild(currentLi, "UL")
      if(!currentMenu) currentMenu = retrieveChild(currentLi, "A")
      // 当前被点击节点的所有父节点,从子节点到根节点
      const parents = retrieveParents(element, "UL") 
      let folds = uls.filter(ul=>!parents.find(p=>p.isSameNode(ul)))
      // 当前被点击节点的兄弟节点是菜单节点时, 此节点不应该被折叠
      if(currentMenu && currentMenu.nodeName==="UL") folds = folds.filter(ul=>!currentMenu.isSameNode(ul))
      // 当前被点击节点的父节点的其他菜单节点都被折叠
      folds.forEach(child=>child.style.display="none")
      switchFold(currentMenu, "UL")
      if(currentMenu && currentMenu.nodeName==="A") alert('a')
    }
  }

  const switchFold = (node, nodeName)=>{
    if(!node || node.nodeName!==nodeName) return

    if(node.style.display==="block"){
      node.style.display="none"
    }else{
      node.style.display="block"
    }
  }

  const retrieveChild = (node, nodeName)=>{
    let child
    if(node){
      const childNodes = node.childNodes
      for(let i=0; i<childNodes.length; i++){
        if(childNodes[i].nodeType===1 && childNodes[i].nodeName===nodeName){
          child = childNodes[i]
        }else{
          child = retrieveChild(childNodes[i])
        }
        if(child) break;
      }
    }
    return child
  }

  const retrieveParent = (node, nodeName)=>{
    if(node && node.nodeType===1&&node.nodeName===nodeName){
      return node
    }else{
      return retrieveParent(node.parentNode, nodeName)
    }
  }

  const retrieveParents = (node, nodeName)=>{
    let parents = []
    if(node){
      if(node.nodeName===nodeName) {
        parents.push(node)
      }
      parents.push(...retrieveParents(node.parentNode, nodeName))
    }
    return parents
  }

  const traverseChildren = (node, nodeName)=>{
    let children = []
    let childNodes = node.childNodes
    for(let i=0; i<childNodes.length; i++){
      if(childNodes[i].nodeType===1 && childNodes[i].nodeName===nodeName){
        children.push(childNodes[i])
      }
      children.push(...traverseChildren(childNodes[i], nodeName))
    }
    return children
  }

  const menus = ()=>{
    const top = list.find(p=>p.parentId===0)
    generator(top, list)
    return <ul>{top.ui}</ul>
  }

  const generator= (p, list)=>{
    const children = list.filter(c=>c.parentId===p.id)
    let parentProps = {...p}

    if(children && children.length>0){
      const uis = []
      children.forEach(c => {
        generator(c, list)
        uis.push(c.ui)
      });
      parentProps = {...parentProps, children:uis}
      if(p.parentId!==0){
        p.ui = <Menu key={p.id} {...parentProps} />
      }else{
        p.ui = <Menu {...parentProps} />
      }
    }else{
      p.ui = <Menu key={p.id} {...parentProps} />
    }
  }

  return (
  <nav>
    {
      menus()
    }
  </nav> 
  )
}
